<template>
	<div class="cityConsume">
		<el-drawer title="城市消耗" :visible.sync="isShow" direction="rtl" size="80%">
			<el-table :data="cityConsumeList" center>
				<el-table-column property="city" label="城市" header-align="center" align="center">
					<template v-slot="{ row }">
						<div>北京{{ row.city }}</div>
					</template>
				</el-table-column>
				<el-table-column
					property="cost"
					label="消耗"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="shows"
					label="展现数"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="avg_show_cost"
					label="千展费用"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="click"
					label="点击数"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="avg_click_cost"
					label="平均点击单价"
					width="120"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="ctr"
					label="点击率"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="converts"
					label="转化数"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="convert_cost"
					label="转化成本"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="convert_rate"
					label="转化率"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="deep_convert"
					label="深转度"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="deep_convert_cost"
					label="深转成本"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="deep_convert_rate"
					label="深转率"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="wechat_num"
					label="加微数"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="wechat_rate"
					label="加微成本"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="deposit_num"
					label="定金数"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					property="convert_rate"
					label="定金成本"
					header-align="center"
					align="center"
				></el-table-column>
			</el-table>
			<div class="btnBox">
				<el-button @click="isShow = false">关闭</el-button>
			</div>
		</el-drawer>
	</div>
</template>
<script lang="ts">
export default {
	name: "CityConsume",
	props: {
		cityConsumeList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			isShow: false
		};
	},
	methods: {
		open(row) {
			this.isShow = true;
		},
		close() {
			this.isShow = false;
		}
	}
};
</script>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.cityConsume {
	text-align: center;
}
.btnBox {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
</style>
